<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=s, initial-scale=1.0">
    <title>7-5</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            /*  会有默认的边距 */
        }
        
        .div1 {
            width: 247px;
            height: 20px;
            /* background-color: red; */
            margin: 5px 0;
        }
        
        .div2 {
            width: 247px;
            height: 20px;
            /*  background-color: red; */
            margin: 5px 0;
        }
        
        .text {
            float: right;
        }
        
        p {
            float: left;
            /*  background-color: pink; */
        }
        
        table {
            border: 1px solid rgb(53, 48, 48);
            border-collapse: collapse;
        }
        
        td {
            height: 30px;
            width: 400px;
            border: 1px solid rgb(68, 63, 63);
            background-color: pink;
            text-align: center;
        }
        
        th {
            height: 30px;
            width: 400px;
            border: 1px solid rgb(41, 36, 36);
            background-color: rgb(233, 152, 233);
        }
        
        .shortwidth {
            width: 100px;
        }
    </style>
</head>

<body>

    <div class="div1">
        <p>请输入姓名:</p>
        <input type="text" class="text">
    </div>
    <div class="div2">
        <p>请输入邮箱:</p>
        <input type="text" class="text">
    </div>
    <input type="button" value="添加" class="botton">
    <!-- 加了两个class -->

    <table>
        <tr>
            <th class="shortwidth">姓名</th>
            <th>邮箱</th>

        </tr>
        <tr>
            <td class="shortwidth">张三</td>
            <td>123455666</td>
        </tr>
        <!--  <tr>
            <td class="shortwidth"></td>
            <td></td>
        </tr> -->
    </table>
    <script>
        var botton = document.querySelector('.botton');
        botton.onclick = function() {
            //创建
            let tr = document.createElement('tr');
            let td1 = document.createElement('td');
            let td2 = document.createElement('td');

            //添加
            var table = document.querySelector('table');
            var texts = document.querySelectorAll('.text');

            tr.appendChild(td1);
            tr.appendChild(td2);
            table.appendChild(tr);
            td1.className = 'shortwidth';
            //加文本,
            //检查代码的顺序

            td1.appendChild(document.createTextNode(texts[0].value));
            td2.appendChild(document.createTextNode(texts[1].value));





        }
    </script>

</body>

</html>